<template>
  <view class="settings-container">
    <!-- 用户信息头部 -->
    <view class="user-header" @click="navigateTo('/pages/member/edit-info')">
      <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
      <view class="user-info">
        <text class="username">{{ userInfo.username }}</text>
        <text class="phone">账号：{{ userInfo.phone }}</text>
      </view>
      <uni-icons type="right" size="16" color="#999"></uni-icons>
    </view>
    
    <!-- 设置项列表 -->
    <view class="settings-list">
      <setting-item 
        title="账号与安全" 
        icon="locked"
        @click="navigateTo('/pages/settings/account')"
      />
      
      <setting-item 
        title="通知设置" 
        icon="notification"
        @click="navigateTo('/pages/settings/notification')"
      />
      
      <setting-item 
        title="隐私设置" 
        icon="eye"
        @click="navigateTo('/pages/settings/privacy')"
      />
      
      <setting-item 
        title="通用设置" 
        icon="gear"
        @click="navigateTo('/pages/settings/general')"
      />
      
      <setting-item 
        title="关于我们" 
        icon="info"
        @click="navigateTo('/pages/settings/about')"
      />
      
      <setting-item 
        title="帮助中心" 
        icon="help"
        @click="navigateTo('/pages/settings/help')"
      />
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-btn">
      <button @click="showLogoutConfirm">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { logout } from '@/api/user'
import SettingItem from './components/SettingItem.vue'

// 用户信息
const userInfo = ref({
  avatar: '/static/avatar-default.png',
  username: '用户名',
  phone: '138****8888'
})

// 导航到指定页面
const navigateTo = (url) => {
  uni.navigateTo({ url })
}

// 显示退出确认对话框
const showLogoutConfirm = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        handleLogout()
      }
    }
  })
}

// 处理退出登录
const handleLogout = async () => {
  try {
    uni.showLoading({ title: '正在退出...', mask: true })
    await logout()
    
    // 清除用户数据
    uni.removeStorageSync('token')
    uni.removeStorageSync('userInfo')
    
    // 跳转到登录页
    uni.reLaunch({ url: '/pages/login/index' })
  } catch (error) {
    uni.showToast({ title: '退出失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

// 初始化加载用户数据
onLoad(() => {
  const storedUser = uni.getStorageSync('userInfo')
  if (storedUser) {
    userInfo.value = storedUser
  }
})
</script>

<style lang="scss">
.settings-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 40rpx;
  
  .user-header {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: $white-bg;
    margin-bottom: 20rpx;
    
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .user-info {
      flex: 1;
      
      .username {
        display: block;
        font-size: $font-size-30rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      
      .phone {
        display: block;
        font-size: 26rpx;
        color: $text-color-666;
      }
    }
  }
  
  .settings-list {
    background-color: $white-bg;
    border-radius: 12rpx;
    margin: 0 20rpx 20rpx;
    overflow: hidden;
  }
  
  .logout-btn {
    margin: 40rpx 20rpx 0;
    
    button {
      height: 88rpx;
      line-height: 88rpx;
      background-color: $white-bg;
      color: $primary-color;
      font-size: $font-size-30rpx;
      border-radius: 12rpx;
      
      &::after {
        border: none;
      }
    }
  }
}
</style>